<!-- 会员服务 -->
<template>
    <div class='warp'>
        <div class="list">
            <div class="item" v-for="item in list" :key="item.id" @click="handleShowModal('edit', item)">
                <span>{{ item.optionsName }}</span>
                <a-icon type="delete" class="del" style="fontSize: 18px" @click.stop="handleDel(item.id)" />
            </div>
            <div class="item" @click="handleShowModal('add', {})">
                <a-icon type="plus" style="fontSize: 60px" />
            </div>
        </div>
        <AddModal ref="addModal" :terminalType="terminalType" @success="getConfigWebsiteMemberService" />
    </div>
</template>

<script>
import AddModal from './components/addModal'
import { configWebsiteMemberService, delConfigWebsiteMemberService } from '@/api/web/web'
export default {
    props: ['terminalType'],
    components: {
        AddModal
    },
    data() {
        return {
            list: []
        }
    },
    computed: {},
    watch: {},
    methods: {
        handleShowModal(type, obj) {
            let data = {
                title: type === 'add' ? '新增文章类别' : '编辑文章类别',
                type,
                obj: JSON.parse(JSON.stringify(obj))
            }
            this.$refs.addModal.show(data)
        },
        async getConfigWebsiteMemberService() {
            let res = await configWebsiteMemberService({ terminalType: this.terminalType })
            this.list = res.data.records || []
        },
        //删除会员服务
        async handleDel(id) {
            var _this = this;
            this.$confirm({
                title: "删除?",
                content: "是否确定删除该会员服务?",
                onOk: async () => {
                    let { code, msg } = await delConfigWebsiteMemberService(id)
                    _this.$message[code === 0 ? 'success' : 'error'](msg)
                    if (code === 0) {
                        _this.getConfigWebsiteMemberService()
                    }
                },
                onCancel() { },
            });
        }
    },
    created() {
        this.getConfigWebsiteMemberService()
    },
    mounted() {

    },
}
</script>
<style scoped lang="less">
.list {
    display: flex;

    .item {
        position: relative;
        width: 200px;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, .1);
        margin-left: 20px;
        cursor: pointer;

        .del {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 18px;
        }
    }
}
</style>